<template>
	<view class="promotion">
		<view class="promotion_header" :style="{ paddingTop: StatusBar + 'px' }">
			<view class="header_box">
				<view class="header_back" @click="navigateBack()">
					<text class="iconfont icon-Left"></text>
				</view>
				<view class="header_title">我的推广</view>
			</view>
		</view>
		<view class="promotion_box">
			<view class="box_content">
				<view class="content_head">
					<text class="head_text">我的推广码</text>
					<text class="head_number">897657</text>
					<text class="head_btn">复制</text>
				</view>
				<view class="content_number">已推广：26人</view>
				<view class="content_image">
					<image src="@/static/logo.png" mode=""></image>
				</view>
				<view class="content_number">https://www.gracguiiauidanjcdcn.com</view>
				<view class="content_btn">
					<view class="btn_item">下载推广码</view>
					<view class="btn_icon"></view>
					<view class="btn_item">复制链接</view>
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
export default {
	data() {
		return {
			textList: []
		};
	},
	methods: {}
};
</script>

<style>
	page {
		background: #f7f8fa;
	}
</style>
<style lang="scss" scoped>
.promotion {
	.promotion_header {
		background: #fff;
		.header_box {
			display: flex;
			align-items: center;
			padding: 28rpx 32rpx;
			position: relative;
			font-weight: bold;
			.header_back {
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.header_title {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.promotion_box {
		margin: 24rpx 32rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: linear-gradient( 180deg, #FFEFD1 0%, rgba(255,255,255,0) 100%);
		box-sizing: border-box;
		padding: 24rpx 20rpx 0;
		.box_content {
			width: 100%;
			height: 690rpx;
			background: url(~@/static/promotion/tg_bg.png) no-repeat;
			background-size: 100%;
			overflow: hidden;
			.content_head {
				display: flex;
				align-items: center;
				margin-top: 58rpx;
				.head_text {
					font-size: 28rpx;
					color: #22150B;
					margin-left: 76rpx;
				}
				.head_number {
					font-size: 28rpx;
					color: #FF9356;
					margin-left: 36rpx;
				}
				.head_btn {
					width: 120rpx;
					height: 68rpx;
					background: #FDD637;
					border-radius: 76rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 104rpx;
				}
			}
			.content_number {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #6C6C6C;
				text-align: center;
			}
			.content_image {
				width: 300rpx;
				height: 300rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				border: 12rpx solid #FDD637;
				margin: 10rpx auto;
				image {
					width: 100%;
					height: 100%;
				}
			
			}
			.content_btn {
				margin-top: 40rpx;
				padding: 0 50rpx;
				box-sizing: border-box;
				display: flex;
				.btn_item {
					flex: 1;
					font-size: 28rpx;
					color: #9B4A0B;
					text-align: center;
				}
				.btn_icon {
					width: 6rpx;
					height: 38rpx;
					background: #FFE4B0;
				}
			}
		}
	}
}


</style>
